<template tag="以下文档内容为hycli自动生成">
  <div style="height: 100%">
    <div style="margin:0.8rem;"><h5 style="display:inline">问题收集</h5><span style="margin-left: 0.5rem; color:#999"> 记录发现的系统问题</span>
        <ddmenu :menuList="lob_idList" @valueChanged="onlob_idChange" v-model="form_anu.lob_id" menuType="my_business_line" ></ddmenu>
    </div>
    <hr style="margin-top:0;color:#999"/>
<div class="query">
    
    <div class="tabs">
        <el-tabs v-model="form_anu.is_published"  @tab-change="onQuery">
            <el-tab-pane v-for="item in is_publishedTabList" :name="item.value" :key="item.value" :label="item.name" 
             ></el-tab-pane>
          </el-tabs>
    </div>
    <el-form :model="form_anu" inline >
        <!-- 日期控件个数： 1 -->
        <el-form-item>
            <!--多日期范围控件 -->
            <el-select v-model="form_anu.single_date_range_name" placeholder="日期类型" style="width:100px;" class="prepend">
                <el-option
                v-for="item in multiQueryDateRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
        </el-select>
            <el-date-picker :shortcuts="shortcuts" style="width: 200px" v-model="form_anu.single_date_range_value" type="daterange" start-placeholder="开始日期"
                end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <!--来源 下拉控件 -->
        <el-form-item>
            <el-select  v-model="form_anu.source" style="width: 100px" clearable placeholder="来源">
                <el-option v-for="item in sourceList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <!--状态 下拉控件 -->
        <el-form-item>
            <el-select  v-model="form_anu.status" style="width: 100px" clearable placeholder="状态">
                <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <!--产生原因 下拉控件多选 -->
        <el-form-item>
            <el-select v-model="form_anu.cause" filterable clearable multiple collapse-tags  style="width: 140px"
            collapse-tags-tooltip placeholder="产生原因">
                <el-option v-for="item in causeList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <!--产品需求 下拉控件多选 -->
        <el-form-item>
            <el-select v-model="form_anu.prod_id" filterable clearable multiple collapse-tags  style="width: 140px"
            collapse-tags-tooltip placeholder="产品需求">
                <el-option v-for="item in prod_idList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <!-- 控件个数：[{"index":6,"raw":"title","name":"title","cname":"Title","type":{"raw":"varchar2(128)","name":"varchar2","len":128,"dlen":0},"defValue":"","allowNull":false,"constraints":["q","c","u","l","le","v","rows(1)","lw(200)"],"desc":{"raw":"标题","name":"标题"}} {"index":9,"raw":"description","name":"description","cname":"Description","type":{"raw":"varchar2(500)","name":"varchar2","len":500,"dlen":0},"defValue":"","allowNull":false,"constraints":["q","c","u","le","v","rows(5)","#like"],"desc":{"raw":"问题说明","name":"问题说明"}}] -->
         <el-form-item>
            <el-input clearable style="width: 220px" v-model="form_anu.single_text_value" maxlength="32"
                placeholder="关键字" >
                <template #prepend>
                    <el-select v-model="form_anu.single_text_name" placeholder="查询类型" style="width:84px;">
                        <el-option
                        v-for="item in multiQueryText"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                      </el-select>
                  </template>
            </el-input>
        </el-form-item>

        <span class="ddl">
        </span>
        <el-form-item>
            <el-space wrap>
                <el-button type="primary" icon="Search" @click="onQuery(true)">查询</el-button>
            </el-space>
        </el-form-item>
        
        <div class="blist">
            <el-button-group>
                <el-button :type="$js.page.tagColor(0)" v-if='
                form_anu.is_published==1'
                
                 icon="Plus"  @click="show_cmpnt_any">添加问题收集</el-button>
                <el-button :type="$js.page.tagColor(1)" v-if='
                form_anu.is_published==1'
                 :disabled="bcheck.length==0" 
                 icon="check"  @click="show_cmpnt_anz">验证发布</el-button>
            </el-button-group>
        </div>

        <!-- xtabs -->
        

    </el-form>
</div>
<div>
   <any ref="cmpnt_any" @onsaved="onQuery"></any>
   <anv ref="cmpnt_anv" @onsaved="onQuery"></anv>
   <anw ref="cmpnt_anw" @onsaved="onQuery"></anw>
   <anz ref="cmpnt_anz" @onsaved="onQuery"></anz>
   <anx ref="cmpnt_anx" @onsaved="onQuery"></anx>
</div>
<div class="list">
    <el-table :data="dataList_anu"
    @selection-change="handleSelectionChange" 
    v-loading="conf.loading" stripe  style="width: 100%;height:calc(100vh - 160px)"
         empty-text="无数据">le
<el-table-column width="24px" type="expand">
    <template #default="view">
        <el-row :gutter="24">
            <el-col :span="5" class="text-right" style="min-height:26px">编号:</el-col>
            <el-col :span="7" v-text="view.row.le_id" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">产品需求:</el-col>
            <el-col :span="7" v-text="view.row.prod_id_label" style="min-height:26px"
              ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">标题:</el-col>
            <el-col :span="7" v-html="view.row.le_title||'-'" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">产生原因:</el-col>
            <el-col :span="7" v-text="view.row.cause_label" style="min-height:26px"
              ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">来源:</el-col>
            <el-col :span="7" v-text="view.row.source_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.source,'source')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">问题说明:</el-col>
            <el-col :span="7" v-html="view.row.le_description||'-'" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">截图:</el-col>
            <el-col :span="7" style="min-height:26px">
                <el-image style="width:48px" :src="view.row.le_image_urls" preview-teleported :fit="contain"  :preview-src-list="[view.row.le_image_urls]">
                    <template #error>
                        <div class="image-slot">
                          <el-icon><icon-picture /></el-icon>
                        </div>
                      </template>
                </el-image>
            </el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">解决方案:</el-col>
            <el-col :span="7" v-html="view.row.le_solution||'-'" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">处理人:</el-col>
            <el-col :span="7" v-text="view.row.resolver_label" style="min-height:26px"
              ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">状态:</el-col>
            <el-col :span="7" v-text="view.row.status_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.status,'status')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">创建人:</el-col>
            <el-col :span="7" v-text="view.row.creator_label" style="min-height:26px"
              ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">已验证:</el-col>
            <el-col :span="7" v-text="view.row.is_verified_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.is_verified,'is_verified')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">已发布:</el-col>
            <el-col :span="7" v-text="view.row.is_published_label" style="min-height:26px"
              :class="$js.page.colorful(view.row.is_published,'is_published')" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">创建时间:</el-col>
            <el-col :span="7" v-text="view.row.le_create_time" style="min-height:26px" ></el-col>
            <el-col :span="5" class="text-right" style="min-height:26px">业务线:</el-col>
            <el-col :span="7" v-text="view.row.lob_id_label" style="min-height:26px"
              ></el-col>
        </el-row>
    </template>
</el-table-column>
          <el-table-column type="selection" width="22" /> 
        	<!--id text -->
        <el-table-column  show-overflow-tooltip    align="center" label="编号" >
            <template #default="scope">
                  <span>{{ scope.row.id||'-' }}</span>
              </template>
        </el-table-column>
        	<!--title text -->
        <el-table-column  show-overflow-tooltip   min-width="200"   align="center" label="标题" >
            <template #default="scope">
                  <span>{{ scope.row.title||'-' }}</span>
              </template>
        </el-table-column>
        	<!--cause tag -->
        <el-table-column    min-width="120"  prop="cause" align="center" label="产生原因">
            <template #default="scope">
                <el-tag :type="$js.page.tagColor(scope.row.cause,'cause')" round v-text="scope.row.cause_label"  ></el-tag>
            </template>
        </el-table-column>
        	<!--resolver multiselect -->
        <el-table-column     prop="resolver" align="center" label="处理人">
            <template #default="scope">
                <span 
                    v-text="scope.row.resolver_label"></span>
            </template>
        </el-table-column>
        	<!--status select -->
        <el-table-column     prop="status" align="center" label="状态">
            <template #default="scope">
                <span :class="$js.page.colorful(scope.row.status,'status')" 
                    v-text="scope.row.status_label"></span>
            </template>
        </el-table-column>
        	<!--is_verified select -->
        <el-table-column     prop="is_verified" align="center" label="已验证">
            <template #default="scope">
                <span :class="$js.page.colorful(scope.row.is_verified,'is_verified')" 
                    v-text="scope.row.is_verified_label"></span>
            </template>
        </el-table-column>
        	<!--is_published select -->
        <el-table-column     prop="is_published" align="center" label="已发布">
            <template #default="scope">
                <span :class="$js.page.colorful(scope.row.is_published,'is_published')" 
                    v-text="scope.row.is_published_label"></span>
            </template>
        </el-table-column>
        	<!--create_time date -->
        <el-table-column  show-overflow-tooltip    align="center" label="创建时间" >
            <template #default="scope">
                  <span>{{ scope.row.create_time||'-' }}</span>
              </template>
        </el-table-column>

<el-table-column fixed="right" align="center" label="操作" width="144">
    <template #default="scope">
        <div class="opts">
            <el-button   type="text" @click="show_cmpnt_anv(scope.row)" >详情 </el-button>
            <el-button   type="text" @click="show_cmpnt_anw(scope.row)" >修改 </el-button>
            <el-button   type="text" @click="show_cmpnt_anx(scope.row)" >删除 </el-button>
        </div>
    </template>
</el-table-column>
    </el-table>
    <el-pagination :currentPage="form_anu.pi" :page-size="form_anu.ps"
        style="position: absolute; right: 30px;bottom:6px;" :page-sizes="[10,15,20,30, 50, 100]" :background="false" small
        layout="total,sizes,prev, pager, next, jumper" :total="total_anu" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</div>
  </div>
</template>
<script>
// 添加问题收集
import any from "@/views/ws/bug/bug_collection.add"
// 详情
import anv from "@/views/ws/bug/bug_collection.view"
// 修改
import anw from "@/views/ws/bug/bug_collection.edit"
// 验证发布
import anz from "@/views/ws/bug/bug_collection.dialog"
// 删除
import anx from "@/views/ws/bug/bug_collection.cnfrm"
// 业务线
import ddmenu from "@/views/cmpnts/ddMenu.vue"



export default {
components: {
    any,
    anv,
    anw,
    anz,
    anx,
     ddmenu,
},
data() {
  return {
    shortcuts: this.$js.page.latestDays(),
    cmpnt_funcs:{},
    bcheck:[],
    conf: {
      loading: false,
      progressColor: this.$theia.env.conf.progress || []
    },
    ganttIdx: -1,
        form_anu: {
            pi: 1,
            ps: 15,
            disabled:false,
            single_date_range_name:"",
            single_date_range_value:[],
            single_text_name:"",
            single_text_value:"",
            cause:[],
            prod_id:[],
            title:"",
            source:"",
            description:"",
            status:"",
            is_published:"",
            create_time:"",
            lob_id:"",
            },
            causeList:[],
            prod_idExts:[],
            prod_idList:[],
            sourceList:[],
            resolverExts:[],
            resolverList:[],
            statusList:[],
            creatorList:[],
            is_verifiedList:[],
            is_publishedList:[],
            is_publishedTabList:[],
            lob_idList:[],
            dataList_anu:[],
            multiQueryDateRange:[{label:"创建时间",value:"create_time"},],
            multiQueryText:[{label:"标题",value:"title"},{label:"问题说明",value:"description"},],
            total_anu:0,
            note_dataList:[],
};
  },
mounted() {
  this.loadEnums_anu()
  this.form_anu.lob_id = this.$theia.user.get("lob_id")
  this.form_anu.single_date_range_name = (this.multiQueryDateRange[0]||{}).value
  this.form_anu.single_text_name = (this.multiQueryText[0]||{}).value
  this.cmpnt_funcs["any"] = this.show_cmpnt_any
  this.cmpnt_funcs["anv"] = this.show_cmpnt_anv
  this.cmpnt_funcs["anw"] = this.show_cmpnt_anw
  this.cmpnt_funcs["anz"] = this.show_cmpnt_anz
  this.cmpnt_funcs["anx"] = this.show_cmpnt_anx

  this.form_anu = Object.assign(this.form_anu,this.$route.params)
    },
 watch: {
    '$route' () {
      this.form_anu = Object.assign(this.form_anu,this.$route.params)
      this.onQuery();//我的初始化方法
    }
  },
methods: {
  ganttChange(id) {
      this.ganttIdx = id
    },

queryData_anu(mform = {},nform={}){
    //构建查询参数
    let queryForm = Object.assign({},this.form_anu)
    queryForm = Object.assign(queryForm,nform||{})
    
    //处理多个日期选择
    queryForm[this.form_anu.single_date_range_name] = this.form_anu.single_date_range_value
    queryForm[this.form_anu.single_text_name] = this.form_anu.single_text_value
   
    //处理日期范围选择
      queryForm.cause = (queryForm.cause||[]).join(",")
      queryForm.prod_id = (queryForm.prod_id||[]).join(",")
      queryForm.start_create_time = null
      queryForm.end_create_time = null
    if(queryForm.create_time && queryForm.create_time.length > 1){
      queryForm.start_create_time = queryForm.create_time[0]
      queryForm.end_create_time = queryForm.create_time[1]
    }

    queryForm[this.form_anu.single_date_range_name] = null
    queryForm.single_date_range_value = null
    queryForm.single_date_range_name = null

    queryForm.single_text_value = null
    queryForm.single_text_name = null
 
    //处理关联表bug_collection bug_collection 
   
    //发送查询请求
    let that = this
    that.conf.loading = true
    //构建统计查询
  //数据查询
  this.$theia.http.get("/ws/bug/collection/query",queryForm).then(res=>{
      if((res.items||[]).length < (queryForm.ps||10)){
        that.form_anu.disabled = true
      }
      that.conf.loading = false
      that.dataList_anu = res.items||[]
      that.total_anu = res.count
      that.resetItemData_anu(that,that.dataList_anu)
    });
  },

  resetItemData_anu(that,lst){
    lst.forEach(item => {
      item.__raw = Object.assign({}, item)
    item.prod_id_label = that.$theia.enum.getName("prod_requirement",item.prod_id)
    item.cause_label = that.$theia.enum.getName("bug_cause",item.cause)
    item.source_label = that.$theia.enum.getName("bug_source",item.source)
    item.resolver_label = that.$theia.enum.getName("staff_info",item.resolver)
    item.status_label = that.$theia.enum.getName("bug_status",item.status)
    item.creator_label = that.$theia.enum.getName("user_account",item.creator)
    item.is_verified_label = that.$theia.enum.getName("bool",item.is_verified)
    item.is_published_label = that.$theia.enum.getName("bool",item.is_published)
    item.lob_id_label = that.$theia.enum.getName("my_business_line",item.lob_id)
    item.id_progress = item.id
    item.prod_id_progress = item.prod_id
    item.title_progress = item.title
    item.cause_progress = item.cause
    item.source_progress = item.source
    item.description_progress = item.description
    item.image_urls_progress = item.image_urls
    item.solution_progress = item.solution
    item.resolver_progress = item.resolver
    item.status_progress = item.status
    item.creator_progress = item.creator
    item.is_verified_progress = item.is_verified
    item.is_published_progress = item.is_published
    item.create_time_progress = item.create_time
    item.lob_id_progress = item.lob_id
    item.le_id = item.id
    item.le_prod_id = item.prod_id
    item.le_title = item.title
    item.le_cause = item.cause
    item.le_source = item.source
    item.le_description = item.description
    item.le_image_urls = item.image_urls
    item.le_solution = item.solution
    item.le_resolver = item.resolver
    item.le_status = item.status
    item.le_creator = item.creator
    item.le_is_verified = item.is_verified
    item.le_is_published = item.is_published
    item.le_create_time = that.$theia.str.dateFormat(item.create_time,'MM/dd')
    item.le_lob_id = item.lob_id
    item.create_time = that.$theia.str.dateFormat(item.create_time,'MM/dd')
    if(item.children){
      that.resetItemData_anu(that,item.children)
    }
  });
  }, 
    onChange_prod_id(val){
      this.prod_idList = this.$theia.enum.get("prod_requirement",val)
      this.form_anu.prod_id = null
    },
    handleSelectionChange(lst=[]){
      this.bcheck = []
      lst.forEach(f=>{
        this.bcheck.push(f.id)
      })
    },
    loadEnums_anu(){
        //产生原因
        this.causeList = this.$theia.enum.get("bug_cause","","" ,false,"")
        //产品需求
        this.prod_idList = this.$theia.enum.get("prod_requirement","",this.$theia.user.get("lob_id"),false,"")
        //来源
        this.sourceList = this.$theia.enum.get("bug_source","","" ,false,"")
        //状态
        this.statusList = this.$theia.enum.get("bug_status","","" ,false,"")
        //已发布
        this.is_publishedTabList = this.$theia.enum.get("pub_status","","",false,"")
        //业务线
        this.lob_idList = this.$theia.enum.getTree("my_business_line","","" ,99)
    },

  handleSizeChange(ps){
    this.form_anu.ps = ps
    this.onQuery(true)
  },
  onlob_idChange(v){
    this.$theia.user.set("lob_id",v)
    this.loadEnums_anu()
    this.onQuery(true)
  },
  handleCurrentChange(pi){
    this.form_anu.pi = pi
    this.onQuery()
  },
  onQuery(refresh){
    if(refresh){
      this.form_anu.pi = 1
    }
    this.queryData_anu ()
  },
show_cmpnt(cmd,row){
  if(this.cmpnt_funcs[cmd]){
    this.cmpnt_funcs[cmd](row)
  }
},
  //详情
  show_cmpnt_anv(fm = {}){
    let query = {} 
    query.id = fm.id|| fm.le_id 
    query.prod_id = fm.prod_id|| fm.le_prod_id 
    query.title = fm.title|| fm.le_title 
    query.cause = fm.cause|| fm.le_cause 
    query.source = fm.source|| fm.le_source 
    query.description = fm.description|| fm.le_description 
    query.image_urls = fm.image_urls|| fm.le_image_urls 
    query.solution = fm.solution|| fm.le_solution 
    query.resolver = fm.resolver|| fm.le_resolver 
    query.status = fm.status|| fm.le_status 
    query.creator = fm.creator|| fm.le_creator 
    query.is_verified = fm.is_verified|| fm.le_is_verified 
    query.is_published = fm.is_published|| fm.le_is_published 
    query.create_time = fm.create_time|| fm.le_create_time 
    query.lob_id = fm.lob_id|| fm.le_lob_id 
    query.id = fm.id

      //2023.4.18添加---

    query.$title="详情"
    this.$refs.cmpnt_anv.show(query)
  },
  //添加问题收集
  show_cmpnt_any(fm = {}){
    let query = {} 
    query.prod_id = fm.prod_id|| fm.le_prod_id 
    query.title = fm.title|| fm.le_title 
    query.cause = fm.cause|| fm.le_cause 
    query.source = fm.source|| fm.le_source 
    query.description = fm.description|| fm.le_description 
    query.image_urls = fm.image_urls|| fm.le_image_urls 
    query.solution = fm.solution|| fm.le_solution 
    query.resolver = fm.resolver|| fm.le_resolver 
    query.status = fm.status|| fm.le_status 
    query.is_verified = fm.is_verified|| fm.le_is_verified 
    query.is_published = fm.is_published|| fm.le_is_published 
    query.id = fm.id

      //2023.4.18添加---

    query.$title="添加问题收集"
    this.$refs.cmpnt_any.show(query)
  },
  //修改
  show_cmpnt_anw(fm = {}){
    let query = {} 
    query.prod_id = fm.prod_id|| fm.le_prod_id 
    query.title = fm.title|| fm.le_title 
    query.cause = fm.cause|| fm.le_cause 
    query.source = fm.source|| fm.le_source 
    query.description = fm.description|| fm.le_description 
    query.image_urls = fm.image_urls|| fm.le_image_urls 
    query.solution = fm.solution|| fm.le_solution 
    query.resolver = fm.resolver|| fm.le_resolver 
    query.status = fm.status|| fm.le_status 
    query.is_verified = fm.is_verified|| fm.le_is_verified 
    query.is_published = fm.is_published|| fm.le_is_published 
    query.id = fm.id

      //2023.4.18添加---

    query.$title="修改"
    this.$refs.cmpnt_anw.show(query)
  },
  //验证发布
  show_cmpnt_anz(fm = {}){
    let query = {}
    query.m = fm.w|| fm.le_w 
    query.id = fm.id

      //2023.4.18添加---
    query.id = (this.bcheck||[]).join(",")

    query.$title="验证发布"
    this.$refs.cmpnt_anz.show_anz(query)
  },
  //删除
  show_cmpnt_anx(fm = {}){
    let query = {} 
    query.id = fm.id|| fm.le_id 
    query.id = fm.id

      //2023.4.18添加---

    query.$title="删除"
    this.$refs.cmpnt_anx.show_anx(query)
  },
},
};
</script>
<style>
.el-dialog{
  border-radius:5px !important
}
</style>
<style scoped>
.el-form-item {
  margin-right: 10px !important;
}

.opts .el-button--small {
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 4px;
}

.blist {
  margin-bottom: 8px;
  width: 100%;
}

.blist .el-radio-group {
  margin-right: 8px;
}

.ddl {
  margin-bottom: 8px;
  width: 100%;

}

.ddl .el-dropdown {
  margin-right: 8px;
}

.listbar {
  margin-bottom: 8px;
  text-align: center;
}
 .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  font-size: 0.65rem;
  margin-top: 7px;
}
/deep/.el-button--small{
  padding: 5px 4px;
}

.prepend /deep/.el-input__wrapper{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.prepend+/deep/.el-date-editor{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-left:0;
}

</style>